<template>
  <div ref="echarts" style="width: 100%; height: 100%"></div>
</template>
  
  <script>
import * as echarts from "echarts";

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const myChart = echarts.init(this.$refs.echarts);
      const dataCount = 5e5;
      const data = generateData(dataCount);
      const option = {
        title: {
          text: "直方图分析",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          bottom: 90,
        },
        dataZoom: [
          {
            type: "inside",
          },
          {
            type: "slider",
          },
        ],
        xAxis: {
          data: data.categoryData,
          silent: false,
          splitLine: {
            show: false,
          },
          splitArea: {
            show: false,
          },
        },
        yAxis: {
          splitArea: {
            show: false,
          },
        },
        series: [
          {
            type: "bar",
            data: data.valueData,
            // Set `large` for large data amount
            large: true,
          },
        ],
      };
      function generateData(count) {
        let baseValue = Math.random() * 1000;
        let time = +new Date(2011, 0, 1);
        let smallBaseValue;
        function next(idx) {
          smallBaseValue =
            idx % 30 === 0
              ? Math.random() * 700
              : smallBaseValue + Math.random() * 500 - 250;
          baseValue += Math.random() * 20 - 10;
          return Math.max(0, Math.round(baseValue + smallBaseValue) + 3000);
        }
        const categoryData = [];
        const valueData = [];
        for (let i = 0; i < count; i++) {
          categoryData.push(
            echarts.format.formatTime("yyyy-MM-dd\nhh:mm:ss", time, false)
          );
          valueData.push(next(i).toFixed(2));
          time += 1000;
        }
        return {
          categoryData: categoryData,
          valueData: valueData,
        };
      }
      myChart.setOption(option);
    },
  },
};
</script>
  